<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>star-cloud</title>
    <!-- <link href="../css/adddevice.css" rel="stylesheet"> -->
    <script src="js/listdevice.js"></script>
    <script src="js/jquery-3.js"></script>

</head>

<body>
    <p class="title">设备列表</p>
    <p>
        <table id="tb_devices">
            <tr>
                <th style="width: 160px;">设备id</th>
                <th style="width: 160px;">设备名 </th>
                <th style="width: 160px;">文件名</th>
                <th style="width: 160px;">表头四</th>
            </tr>

        </table>
    </p>
    <p>
        <button id="upload" type="button" onclick="jumpToAdd()">添加设备</button>
    </p>
    <script type="text/javascript">
        $(document).ready(function () {
            //鼠标移动到行变色,单独建立css类hover 
            //tr:gt(0):表示获取大于 tr index 为0 的所有tr，即不包括表头 
            $("#tb_devices tr:gt(0)").hover(function () {
                $(this).addClass("hover")
            }, function () {
                $(this).removeClass("hover")
            });
            $.ajax({
                url: '../api/device/all',
                type: 'POST',
                cache: false,
                processData: false,
                contentType: false
            }).done(function (res) {
                $.each(JSON.parse(res), function (index, item) {
                    var newRow = "<tr><td>{0}</td><td>{1}</td><td>{2}</td><td><input type='button' onclick='removeDevice(\"{0}\")' value='删除'/><input type='button' onclick='runDevice(\"{0}\")' value='运行'/></td></tr>".format(item.ID, item.Name, item.FileName);
                    $("#tb_devices tr:last").after(newRow);
                });
            }).fail(function (res) {

            });

        });
        function jumpToAdd() {
            window.location.href = 'adddevice.html';
        }
        function removeDevice(obj) {
            var data = {
                id: obj
            };
            $.ajax({
                type: "POST",
                url: "/api/device/remove",
                traditional: true,
                // contentType: "application/json",
                // data: JSON.stringify(data),
                data: data,
                success: function (msg) {
                    alert(msg);
                    window.location.href = 'listdevice.html';
                }
            });
        }
        function runDevice(obj) {
            var data = {
                id: obj
            };
            alert(obj)
            $.ajax({
                type: "POST",
                url: "/api/device/run",
                traditional: true,
                // contentType: "application/json",
                // data: JSON.stringify(data),
                data: data,
                success: function (msg) {
                    alert(msg);
                    window.location.href = 'listdevice.html';
                }
            });
        }
    </script>
</body>

</html>